<template>
  <div class="user">
    <van-nav-bar
      title=""
      left-text="返回"
      right-text="退出"
      left-arrow
      @click-left="onClickLeft"
      @click-right="quitHandl"
      class="bar-list"
    />
    <div class="top">
      <div class="iUrl">
        <div class="left">
          <van-image
            round
            width="5rem"
            height="5rem"
            src="https://img0.baidu.com/it/u=1540480782,4125412424&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=297"
          />
          <p>晨浩</p>
        </div>

        <div class="rignt">
          <van-icon name="scan" size="1.5rem" />
          <van-icon name="qr" size="1.5rem" />
        </div>
      </div>
      <div class="money">
        <div class="money-one">
          <span>2</span>
          <h5>优惠卷</h5>
        </div>
        <div class="money-one">
          <span>100.00</span>
          <h5>我的账户</h5>
        </div>
        <div class="money-one">
          <span>3</span>
          <h5>电子券</h5>
        </div>
      </div>
      <div class="order">
        <h1>我的订单</h1>
        <div class="orders">
          <div class="order-one">
            <van-icon name="bill-o" size="1.5rem" />
            <h5>待付款</h5>
          </div>
          <div class="order-one">
            <van-icon name="logistics" size="1.5rem" />
            <h5>待发货</h5>
          </div>
          <div class="order-one">
            <van-icon name="peer-pay" size="1.5rem" />
            <h5>待收货</h5>
          </div>
          <div class="order-one">
            <van-icon name="thumb-circle-o" size="1.5rem" />
            <h5>待评价</h5>
          </div>
        </div>
      </div>
      <div class="order">
        <h1>常用工具</h1>
        <div class="orders">
          <div class="order-one">
            <van-icon name="bill-o" size="1.5rem" />
            <h5>开发票</h5>
          </div>
          <div class="order-one">
            <van-icon name="logistics" size="1.5rem" />
            <h5>内容收藏</h5>
          </div>
          <div class="order-one" style="">
            <h5 style="color: #fff">内容大体</h5>
          </div>
          <div class="order-one">
            <h5 style="color: #fff">内容</h5>
          </div>
        </div>
      </div>
      <div class="recommend">
        <div
          style="background-color: #f5f5f5; text-align: center; padding: 0.6rem"
        >
          <h5 style="color: #0eb6ff">推荐</h5>
        </div>
        <div class="app-auto">
          <router-link
            :to="{ name: 'Detail', params: { id: item.id } }"
            class="ap-item"
            v-for="item in recommend"
            :key="item.id"
            style="color: black"
          >
            <van-image fit="cover" :src="item.coverImage | dalImg" />
            <p>{{ item.name }}</p>
            <p>
              <span style="margin-right: 10px"
                ><span style="color: red">￥{{ item.price }}</span
                >/箱</span
              >
              <span class="cart"
                ><van-icon name="shopping-cart-o" color="white" />
              </span>
            </p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { removeToken } from "../Uitils/auth";
import { loadProductsAPI } from "../services/products";
import { loadCartsAPI } from "../services/carts";
export default {
  data() {
    return {
      Carts: [],
      recommend: [],
    };
  },
  created() {
    loadCartsAPI().then((res) => {
      console.log(res);
      this.Carts = res.data;
    });

    loadProductsAPI().then((res) => {
      this.recommend = res.data;
    });
  },
  methods: {
    quitHandl() {
      removeToken();
      this.$router.push({
        name: "home",
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.bar-list {
  height: 6rem;
  background: rgb(14, 182, 255);
}
.user {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgb(245, 245, 245);
}
.top {
  /* height: 20rem; */
  width: 94%;
  position: relative;
  top: -3rem;
  left: 0.7rem;
  overflow: hidden;
  z-index: 3;
  border-radius: 0.5rem;
  justify-content: space-around;
}
.iUrl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
  background: #fff;
}
.left {
  display: flex;
  height: 100%;
  width: 40%;
  align-items: center;
  justify-content: space-around;
}
.left p {
  font-size: 1rem;
}
.rignt {
  display: flex;
  height: 100%;
  width: 20%;
  align-items: center;
  justify-content: space-around;
}
.money {
  height: 4rem;
  border-bottom: 0.6rem solid rgb(14, 182, 255);
  display: flex;
  justify-content: space-between;
  background: #fff;
}
.money-one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 20%;
}
.order {
  height: 7rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #fff;
  border-top: 0.6rem solid rgb(245, 245, 245);
}
.order h1 {
  font-size: 0.8rem;
}
.orders {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

/* 推荐 */
.app-auto {
  background-color: #f5f5f5;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-bottom: 2rem;
}
.ap-item {
  border-radius: 10px;
  margin-top: 10px;
  background-color: #fff;
  width: 46vw;
  padding: 10px;
}
.ap-item p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart {
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  background-color: #0eb6ff;
}
</style>
